<script lang="ts" setup>
import { onHide } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'

// popup 的调用方法
const popup = ref<{
  open: () => void
  close: () => void
}>()

const emits = defineEmits(['goPay'])
// 分别调用相应的方法导出
const popupOpen = () => {
  popup.value?.open() // 接受父组件传过来的弹出方位
}
const popupClose = () => {
  popup.value?.close()
}
// 获取父组件传值
const props = withDefaults(
  defineProps<{
    head: string
    rules?: any
    item: any
  }>(),
  {
    head: '购买说明',
    item: { type: Object, default: () => {} },
    goods: { type: Boolean, default: true },
  },
)


/**跳转到可使用点位页面 */
const skipPage = (couponId: number) => {
  // console.log(couponId)
  uni.navigateTo({
    url: `/pagesMy/availablePoint/availablePoint?couponId=${couponId}`,
  })
}
/**套餐类型的样式 */
const changeTagStyle = computed(() => {
  if (!props.item.appletComboInfoDto?.tagComboList) return ''
  return props.item.appletComboInfoDto?.tagComboList[0]?.tagName === '限时'
    ? 'timeLimit'
    : props.item.appletComboInfoDto?.tagComboList[0]?.tagName === '热销'
    ? 'Hot'
    : ''
})
/**套餐类型的样式 */
const changeCouponTagStyle = computed(() => {
  if (!props.item.tagName) return ''
  return props.item.tagName === '限时' ? 'timeLimit' : props.item.tagName === '热销' ? 'Hot' : ''
})
/** tag 套餐类型文字 */
const changeTagText = computed<string>(() => {
  return props.item.appletComboInfoDto.tagComboList
    ? props.item.appletComboInfoDto.tagComboList[0]?.tagName
    : '推荐'
})
/** 套餐的数量 小于三份并且大于0份 的时候提示用户判断值 */
const chengaIsTip = computed(() => {
  return props.item.stocks <= 3 && props.item.stocks > 0 ? true : false
})
/**跳转到详情页面 */
const skipDetailsPage = (item: any) => {
  if (item.stocks == 0) return // 当库存为0 时 不进行点击跳转
  const items = encodeURIComponent(JSON.stringify(item))
  uni.navigateTo({
    url: `/pagesEat/detailsPage/detailsPage?items=${items}`,
  })
}

const goPay = () => {
  if (!props.item.currentStock || !props.item.canBuy) return
  if (props.item.currentStock > 0 && props.item.canBuy) {
    popup.value?.close()
    emits('goPay')
  } else {
    popup.value?.open()
  }
}

onHide(() => {
  popup?.value?.close()
})

// 导出方法
defineExpose({
  popupOpen,
  popupClose,
})
</script>

<template>
  <uni-popup ref="popup" class="couponPackPopoup" :safe-area="false" type="bottom">
    <view class="popupBox">
      <view class="head">{{ head }}</view>
      <view ref="_item" class="item">
        <!-- 套餐图片 -->
        <view class="itemImage">
          <image
            class="_image"
            :src="props.item.shopImg || ``"
            mode="scaleToFill"
          />
        </view>
        <!-- 右侧套餐说明 -->
        <view class="rightExplain">
          <view class="nameWrapper">
            <view class="name">
              {{ props.item.name }}
            </view>
          </view>
          <view class="chartlet">
            <view class="tag" :class="changeCouponTagStyle">{{ props.item.tagName }}</view>
            <view class="limit" v-if="props.item.currentStock <= 3 && props.item.currentStock > 0"
              >仅剩{{ props.item.currentStock }}份</view
            >
          </view>
          <view class="price">
            <view
              class="originalPrice"
              :style="{
                color: '#f14b4b',
                fontSize: '32rpx',
              }"
            >
              <view class="symbol">￥</view>{{ props.item.price }}</view
            >
          </view>
        </view>
      </view>
      <view class="line"></view>
      <view class="_body">
        <view class="_bodyHeader">购买说明</view>
        <view class="_bodyContent">
          <view v-html="props.rules?.rule"></view>
        </view>
      </view>
      <button
        class="_button"
        :style="{
          background: item.currentStock && item.canBuy ? '' : '#b3b2b270',
        }"
        @tap.stop="goPay"
      >
        {{ item.currentStock ? '立即购买' : '暂无库存' }}
      </button>
    </view>
  </uni-popup>
</template>

<style lang="scss">
//
.couponPackPopoup {
  z-index: 100;
}
.popupBox {
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  padding-bottom: 60rpx;
}
.head {
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 96rpx;
  font-size: 30rpx;
  color: #000000e5;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
}
._body {
  padding: 24rpx 48rpx 40rpx;
  font-size: 28rpx;
  color: #000000e5;
  ._bodyHeader {
    color: rgba(0, 0, 0, 0.9);
    font-size: 32rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 14rpx;
  }
  ._bodyContent {
    width: 690rpx;
    height: 160rpx;
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: wrap;
    color: rgba(0, 0, 0, 0.9);
    font-family: 'PingFang SC';
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
  }
}
._button {
  height: 76rpx;
  line-height: 76rpx;
  margin: 14rpx 24rpx;
  font-size: 26rpx;
  color: #fff;
  border-radius: 44rpx;
  background-color: $uni-color-motif;
}
// 循环套餐 item
.item {
  display: flex;
  width: 100%;
  height: 176rpx;
  margin-bottom: 28rpx;
  padding: 0 28rpx;
  &:last-child {
    margin-bottom: 48rpx;
  }
  .itemImage {
    display: flex;
    justify-content: center;
    // background-image: url('/static/images/eat_food_bg.png');
    background-size: cover; /* 设置背景图大小适应容器 */
    background-position: center; /* 设置背景图位置居中 */
    margin-right: 16rpx;
    width: 176rpx;
    height: 100%;
    border-radius: 8rpx;
    ._image {
      margin-top: 60rpx;
      width: 144rpx;
      height: 96rpx;
      border-radius: 8rpx;
    }
  }
}
.stocksIF {
  opacity: 0.7;
}
// 右侧套餐说明
.rightExplain {
  width: calc(100% - 192rpx); // 父级盒子自定义宽度
  .nameWrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .name {
      height: 40rpx;
      line-height: 40rpx;
      font-size: 34rpx;
      color: #000000e5;
      // width: 100%; // 必定设置宽度
      white-space: nowrap; /* 防止换行 */
      overflow: hidden; /* 限制溢出内容隐藏 */
      text-overflow: ellipsis; /* 使用省略号 */
    }
    .imageWrapper {
      flex-shrink: 0;
      flex-grow: 1;
      min-width: 72rpx;
      .image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
  .heat {
    width: 100%; // 必定设置宽度
    white-space: nowrap; /* 防止换行 */
    overflow: hidden; /* 限制溢出内容隐藏 */
    text-overflow: ellipsis; /* 使用省略号 */
    margin: 8rpx 0;
    height: 38rpx;
    font-size: 22rpx;
    color: #00000080;
  }
  .chartlet {
    display: flex;
    align-items: center;
    height: 36rpx;
    font-size: 24rpx;
    margin: 20rpx 0;
    .tag {
      margin-right: 8rpx;
      padding: 0 8rpx;
      height: 36rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6rpx;
      color: $uni-color-motif;
      background-color: #f1ffee;
    }
    .timeLimit {
      color: #e14949;
      background-color: #fff6f6;
    }
    .Hot {
      color: #ff9c09;
      background-color: #fff5e5;
    }
    .limit {
      width: 104rpx;
      height: 36rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #8d6b25;
      border-radius: 6rpx;
      border: 1px solid #8d6b25;
    }
  }
  .price {
    position: relative;
    height: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    .discountPrice {
      font-family: 'Rowdies';
      font-size: 32rpx;
      color: #f14b4b;
      margin-right: 8rpx;
      font-weight: 400;
      display: flex;
      align-items: center;
      .symbol {
        font-size: 18rpx;
      }
      .estimated_arrival {
        margin-left: 10rpx;
        font-size: 20rpx;
      }
    }
    .originalPrice {
      display: flex;
      align-items: center;
      font-family: 'Rowdies';
      font-weight: 400;
      font-size: 32rpx;
      color: #0000004d;
      .symbol {
        font-size: 18rpx;
      }
    }
    .select {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 124rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      font-size: 28rpx;
      color: #fff;
      background-color: $uni-color-motif;
      border-radius: 30rpx;
    }
    .SoldOut {
      background: #b3b2b2;
    }
  }
}
.line {
  width: 351px;
  height: 2rpx;
  opacity: 0.1;
  background: #000;
  margin: 0 auto;
}
</style>
